<template>
  <div id="home_entry">
    <div class="home_content">
      <div class="banner_content">
        <img :src="bannerImgs" alt="" />
        <div class="Row">
          <section>
            <header>
              <h3>消除业务和技术的鸿沟</h3>
              <h1>以思考的速度构建企业应用系统</h1>
            </header>
            <div>
              <p>
                <a href="#" class="watch_link">观看演示视频 <i class="watch_icon"></i></a>
              </p>
              <p class="try_out">免费试用</p>
              <footer>
                <a href="#">迅构是什么？</a>
                <p>迅构是一个云端架构快速企业级应用开发平台。支持快速装配能力，无需编写或编写少量代码，方便业务或实施人员在短时间内通过可视化的配置方式搭建好立即可用、安全、稳定、高性能的各类企业应用。</p>
              </footer>
            </div>
          </section>
         </div>
      </div>
      <article class="describe">
        <section class="Row">
          <h3>追求极致简单 功能依然强大</h3>
          <div class="sub_content">
            <header>
              <i class="describe1"></i>
            </header>
            <div>
              <h4>无需编码即可实现强大可能</h4>
              <p>
                迅构云平台采用的ThinkBuilder Studio开发平台，利用了强大的桌面端富UI技术，将构建速度和体验提升到新高度，能方便快捷的构建出各种功能复杂、UI丰富的应用软件，绝非一般表单定制工具可比。
              </p>
            </div>
          </div>
          <div class="sub_content">
            <header>
              <i class="describe2"></i>
            </header>
            <div>
              <h4>从零构建真正的企业级应用系统</h4>
              <p>
                在迅构云平台上构建的应用软件是真正意义上的企业级系统。平台在架构上采用企业级标准，对海量数据、高并发、安全性和一致性均通过严格的测试，完全支持大量用户同时访问千万，乃至上亿级别的数据量。
              </p>
            </div>
          </div>
          <div class="sub_content">
            <header>
              <i class="describe3"></i>
            </header>
            <div>
              <h4>支持绝大多数平台</h4>
              <p>
                一步到位支持生成包括windows桌面客户端、Mac桌面客户端、Web网站应用、原生手机APP、微信公众号、微信小程序、钉钉等。以上均为迅构云平台本身默认提供支持，全自动生成，无需额外定制化开发。。
              </p>
            </div>
          </div>
        </section>
      </article>
      <article class="banner">
        <section class="Row">
          <Carousel autoplay v-model="value1"
            :autoplay-speed="timeInterval" >
              <Carousel-item>
                  <div class="demo-carouse1">
                    <header>
                      <h3>
                          经典案例
                      </h3>
                    </header>
                    <div>
                      <img :src="carousel" alt="">
                    </div>
                    <div>
                      <h4>OA企业管理系统</h4>
                      <p>
                        在迅构云平台上构建的应用软件是真正意义上的企业级系统。平台在架构上采用企业级标准，对海量数据、高并发、安全性和一致性均通过严格的测试，完全支持大量用户同时访问千万，乃至上亿级别的数据量。
                      </p>
                    </div>
                  </div>
              </Carousel-item>
              <Carousel-item>
                  <div class="demo-carouse1">
                    <header>
                      <h3>
                         经典案例
                      </h3>
                    </header>
                    <div>
                      <img :src="carousel" alt="">
                    </div>
                    <div>
                      <h4>OA企业管理系统</h4>
                      <p>
                        在迅构云平台上构建的应用软件是真正意义上的企业级系统。平台在架构上采用企业级标准，对海量数据、高并发、安全性和一致性均通过严格的测试，完全支持大量用户同时访问千万，乃至上亿级别的数据量。
                      </p>
                    </div>
                  </div>
              </Carousel-item>
          </Carousel>
         </section>
      </article>
      <article class="characteristic">
        <section class="Row">
          <header>
            <h3>迅构云系统特色</h3>
          </header>
          <ul>
              <li v-for="(item,index) in  trait" :key="index">
                <h5>{{item.title}}</h5>
                <p v-if="item.link==''">{{item.content}}</p>
                <p v-else>
                   <a  :href="item.link">{{item.content}}</a>
                </p>
              </li>
          </ul>
        </section>
      </article>
      <article class="apply_for">
        <section class="Row">
           <Form :model="formInline" ref="formInline" :rules="ruleInline">
             <Row>
               <Col span="12" class="blank_r">
                  <FormItem prop="CompanyName" label="公司/企业名称">
                    <Input type="text" v-model="formInline.CompanyName" placeholder="公司或企业名称">
                    </Input>
                </FormItem>
               </Col>
               <Col span="12" class="blank_l">
                  <FormItem prop="CompanyType" label="公司/企业类型">
                    <Input type="text" v-model="formInline.CompanyType" placeholder="经营类型">
                    </Input>
                </FormItem>
               </Col>
             </Row>
             <Row>
               <Col span="12" class="blank_r">
                  <FormItem prop="Email" label="邮箱Email">
                    <Input type="text" v-model="formInline.Email" placeholder="公司或企业名称">
                    </Input>
                </FormItem>
               </Col>
               <Col span="12" class="blank_l">
                <FormItem prop="Phone" label="联系电话手机">
                    <Input type="text" v-model="formInline.Phone" placeholder="经营类型">
                    </Input>
                </FormItem>
               </Col>
             </Row>
             <Row>
               <Col span="12" class="blank_r">
                  <FormItem prop="Province" label="省份">
                     <Select v-model="formInline.Province" @on-change="provinces" :label-in-value="optionsStatus">
                        <Option  v-for="item in province_city.province"  
                          :value="item.Id" :key="item.Id">{{item.AreaName}}</Option>
                    </Select>
                </FormItem>
               </Col>
               <Col span="12" class="blank_l">
                  <FormItem prop="City" label="城市">
                    <Select v-model="formInline.City">
                      <Option  v-for="item in province_city.city"   
                        :value="item.AreaName" :key="item.Id">{{item.AreaName}}</Option>
                  </Select>
                </FormItem>
               </Col>
             </Row>
             <Row>
               <Col span="24">
                  <FormItem label="备注说明">
                    <Input type="textarea" v-model="formInline.Remark" 
                      placeholder="选填">
                    </Input>
                </FormItem>
               </Col>
             </Row>
             <Row>
               <Col span="24">
                  <FormItem>
                    <Button type="primary" class="submit" @click.native="Submits('formInline')">提交资料</Button>
                 </FormItem>
               </Col>
             </Row>
           </Form>
        </section>
      </article>
    </div>
  </div>
</template>
<script>
  import Header from 'components/menu/header'
  import Footer from 'components/modules/footer'
  import bannerBackground from 'assets/img/u117.jpg'
  import lamp from 'assets/img/u191.png'
  import {mapState,mapActions} from 'vuex'

  export default{
    name:'iExtry',
    components:{Header,Footer},
    data(){
      return{
        bannerImgs:bannerBackground,
        carousel:lamp,
        value1:0,
        timeInterval:5000,
        optionsStatus:true,
        province:'',
        formInline: {
            CompanyName: '',
            CompanyType: '',
            Email:'',
            Phone:'',
            Province:'',
            City:'',
            Remark:''
        },
        ruleInline: {
            CompanyName: [
                { required: true, message: '请输入公司或企业名称！', trigger: 'blur' }
            ],
            CompanyType: [
                { required: true, message: '请输入公司或企业类型！', trigger: 'blur' }
            ],
            Email:[{ required: true, message: '邮箱不能为空！', trigger: 'blur' },
            {type:'email',message:'邮箱格式不正确！'}],
            Phone:[{ required: true, message: '号码不能空！', trigger: 'blur' },{
              pattern:/^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/,message:'号码不正确！'
            }],
            Province:[{ required: true, message: '省份为必填项！', trigger: 'blur' }],
            City:[{ required: true, message: '城市为必填项！', trigger: 'blur' }]
        },
        trait:[{
          title:'丰富多样的数据图表',
          content:'迅构云支持柱状图、折线图、饼图、雷达图等各种常见图表，并且无需写代码，直接将图表和后台数据源绑定即可展现丰富精美的数据分析报告。',
          link:''
        },{
          title:'Word和Excel模板视图',
          content:'迅构云支持内嵌的Word以及Excel格式的模板视图，并且可以直接将后台数据和Word、Excel视图进行绑定，同时还可以用熟悉的Office工具对界面进行自由排版，由此衍生出无限的可能，将自定义系统的灵活性推向一个新高度。',
          link:''
       },{
          title:'企业级工作流引擎',
          content:'迅构云工作流引擎选取业内标准BPMN模型作为工作流模型的语义表达，支持流转审核、跳转、会签、加签、撤回以及子流程等各种流程的处理。同时提供了一套强大的图形化工作流引擎设计器，极速构建企业内部流程的管理。',
          link:''
       },{
          title:'拖拽式构建任意界面',
          content:'迅构云的界面设计器可以以超高的自由度设计出运行在所有设备上几乎任何你想要的企业应用界面，而且操作简单方便，无需编写任何代码。',
          link:''
       },{
          title:'可视化设计业务模型',
          content:'迅构云将企业的业务逻辑抽象成业内标准的业务模型（Domain Model），并提供一套可视化工具进行建模。支持聚合，关联，外链等各种模型关系。',
          link:''
       },{
          title:'强大方便的脚本编辑和调试',
          content:'为了能有足够的灵活性来覆盖100%的业务场景，迅构云还内部集成了后台的代码编辑、自动编译和调试功能。通过这种方式一举解决企业应用中“10%的特殊需求”，比如特殊业务逻辑，读取外部数据源等等。几乎没有功能在迅构云平台上是做不到。',
          link:''
        },{
          title:'企业内部应用群集',
          content:'在迅构云平台上构建的企业应用系统采用统一的中央认证授权机制，各个系统之间共享统一的用户认证和权限管理系统，让企业内部的业务系统互联互通形成为一个“战斗航母群”，避免企业的各个系统之间成为“信息孤岛”。',
          link:''
        },{
          title:'灵活强大的自定义报表',
          content:'迅构云提供了强大的报表设计器，可以自由灵活的定义生成各式各样，美观专业的报表，并可自由导出为任何包括Word，Excel，PDF等十多种格式。',
          link:''
       },{
          title:'企业外部门户网站',
          content:'在迅构云平台上构建的企业应用系统采用统一的中央认证授权机制，各个系统之间共享统一的用户认证和权限管理系统，让企业内部的业务系统互联互通形成为一个“战斗航母群”，避免企业的各个系统之间成为“信息孤岛”。',
          link:''
        },{
          title:'私有云本地化部署',
          content:'迅构云不仅仅只支持在互联网网上的注册即用的公网云服务，同时还可以将定制好的云应用一键下载部署在企业内网服务器上，与外网物理隔离，保障了企业数据的绝对安全。',
          link:''
        },{
          title:'外部系统无缝对接',
          content:'迅构云内建支持几乎所有的关系型数据库和Restful',
          link:''
        },{
          title:'',
          content:'了解更多...',
          link:'#'
        }]
      }
    },computed:{
      ...mapState(['province_city'])
    },methods:{
      ...mapActions(['getPlace','submitRegister']),
      Submits(from){
        this.$refs[from].validate((now) => {
          if(now)
           this.$store.dispatch('submitRegister',[this.formInline,this.province])
        })
      },
      provinces(e){
        this.$store.dispatch('getPlace',e.value)
        this.province = e.label
        console.log('变化',this.province)
      }
    },created(){
      this.$store.dispatch('getPlace',this.formInline.province)
    }
  }

</script>
<style>
</style>